<script setup lang="ts">
import { Router } from "@/utils/router";
import NavSpace from "@/components/nav/space.vue";
import { ref, onMounted, onUnmounted } from "vue";
import RequireItem from "./components/require-item.vue";
import { get_require_index, task_index_header } from "../api/index";
import ScrollList from "@/components/list/scroll-list.vue";
import PopupModal from "@/components/popup/modal.vue";

import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
import { onLoad, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
const { onShareAppMessage, onShareTimeline } = useShare(
  "/package/require/pages/index"
);
onLoad((options) => {
  useQuery(options as MiniApp.AppLaunchOption, () => {});
});
const popupModal = ref<InstanceType<typeof PopupModal>>();
const props = defineProps<{ id: number; name: string }>();
const name = ref("全国");
const searchData = ref({
  end_area_id: props.id ? props.id : "",
  type: 0,
});
if (props.name) {
  name.value = props.name;
}
const activeIndex = ref(0);
const setActive = (index: number) => {
  activeIndex.value = index;

  searchData.value.type = index;
  srollRef.value?.reload();
};
const toSearch = () => {
  Router.navigateTo(`/package/require/pages/search/index`);
};
const toCity = () => {
  Router.redirectTo(`/package/require/pages/city/index`);
};
const publish = () => {
  popupModal.value?.show({
    title: "温馨提示",
    content: "功能开发中，敬请期待",
    showCancel: false,
    confirmText: "我知道了",
  });
};
const srollRef = ref<typeof ScrollList>();
onMounted(() => {
  getHeadList();
});
onUnmounted(() => {
  clearInterval(interId.value);
});
const interId = ref(0);
const hasData = ref(false);

const getList = (data: any) => {
  hasData.value = data.length ? true : false;
};

const scrollShow = ref(false);
const headList = ref<any>([]);
const getHeadList = () => {
  task_index_header().then((res) => {
    headList.value = res.task_type;
    searchData.value.type = headList.value[0]?.id;
    activeIndex.value = headList.value[0]?.id;
    scrollShow.value = true;
    interId.value = setInterval(() => {
      srollRef.value?.getList();
    }, 61 * 1000);
  });
};
</script>
<template>
  <view class="head">
    <view class="contry" @click="toCity">
      <text>{{ name }}</text>
      <image src="/package/require/static/arrowBottom.png"></image>
    </view>
    <view class="searchWrap" @click="toSearch">
      <view class="search">
        <image src="/package/require/static/search.png"></image>
        <view class="input"> 搜索任务名称 </view>
      </view>
    </view>

    <view class="edit" @click="publish">
      <image src="/package/require/static/edit.png"></image>
      <text>发布</text>
    </view>
  </view>
  <view class="tag">
    <view
      v-for="(item, index) in headList"
      :key="index"
      class="tagItem"
      :class="activeIndex == item.id ? 'active' : 'tagItem'"
      @click="setActive(item.id)"
      >{{ item.name }}</view
    >
  </view>
  <view class="empty" v-show="!hasData">
    <view class="emptyItem">
      <image src="/package/require/static/empty.png" mode="scaleToFill" />
      <view class="word">无符合条件的任务</view>
    </view>
  </view>
  <view class="requireItem" v-show="hasData">
    <ScrollList
      v-if="scrollShow"
      ref="srollRef"
      :api="get_require_index"
      pageSize="10"
      :query="searchData"
      @getList="getList"
    >
      <template #default="{ list }">
        <RequireItem v-for="item in list" :key="item.id" :data="item" />
      </template>
    </ScrollList>
  </view>
  <PopupModal ref="popupModal" />
</template>

<style lang="scss">
.head {
  z-index: 3;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  padding: 0 40rpx;
  height: 108rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .contry {
    flex-shrink: 0;
    width: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text {
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
    }
    image {
      width: 16rpx;
      height: 16rpx;
    }
  }
  .searchWrap {
    flex-grow: 1;
    box-sizing: border-box;
    padding: 0 30rpx;
    height: 120rpx;
    display: flex;
    align-items: center;
    .search {
      width: 380rpx;
      height: 68rpx;
      background: rgba($color: #ffffff, $alpha: 0.5);
      border: 0.5px solid #ff7900;
      border-radius: 34rpx;
      backdrop-filter: blur(10rpx);
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      image {
        width: 32rpx;
        height: 32rpx;
      }
      .input {
        flex-grow: 1;
        font-size: 24rpx;
        color: #cccccc;
        line-height: 34rpx;
        padding-left: 20rpx;
      }
    }
  }

  .edit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    text {
      font-size: 28rpx;
      text-align: center;
      color: #ff7900;
      line-height: 40rpx;
    }
    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }
  }
}
.tag {
  z-index: 3;
  position: fixed;
  top: 108rpx;
  padding-left: 40rpx;
  padding-top: 20rpx;
  height: 66rpx;
  background: #ffffff;
  width: 100%;
  display: flex;
  .tagItem {
    margin-right: 40rpx;
    font-size: 26rpx;
    color: #666666;
    line-height: 36rpx;
  }
  .active {
    color: #ff7900;
  }
}

.requireItem {
  padding: 188rpx 40rpx 20rpx 40rpx;
  z-index: 1;
}
.empty {
  .emptyItem {
    margin: 300rpx auto;
    width: 560rpx;
    image {
      width: 560rpx;
      height: 300rpx;
      opacity: 0.6;
    }
    .word {
      font-size: 28rpx;
      text-align: center;
      color: #999999;
      line-height: 40px;
    }
  }
}
</style>
